<template>
  <div class="public_content">
		<!-- 先锋榜样 -->
		<div class="pull-left pb-10">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-18 pl-15">先锋风采</span>
			</div>
			<div class="study_topic_content mt-15">
				<!--标题开始-->
				<h2 class="center-text pb-15 fcolor-11 fsize-28">{{pioneerInfo.realname}}</h2>
				<!--标题结束-->
				<div class="pic h-200 center">
					<img :src="pioneerInfo.image" height="100%">
				</div>
				<!-- 简介 -->
				<p class="fsize-16 fcolor-11 lh-24 mt-20 ti-2">
				</p>
				<!-- 事迹 -->
				<p class="fsize-16 fcolor-11 lh-24 mt-20 ti-2" v-html="pioneerInfo.content"></p>	
			</div>
		</div>
		<!--新闻快讯-->
		<div class="threeitems pull-right w-320 over-h">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-16 pl-15">先锋榜</span>
			</div>
			<ul class="public_card_content over-h mt-15" v-if="pioneerList.length > 0">
				<li class="lh-30 text-l" 
					v-for="(item,index) in pioneerList.slice(0,10)"
					@click="getPioneerInfo(item.id)">
					<span>先锋榜样 —— {{item.realname}}</span>  
				</li>	
			</ul>	
		</div>		
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				id:'',
				pioneerInfo:{},
				pioneerList:[],
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				this.$parent.$data.current = 0;
				this.id = this.$route.params.id;
				this.getPioneerInfo(this.id);
				this.getPioneerList();
			},
			//获取榜样信息
			getPioneerInfo(id){
				this.$axios.get(`web/showuser/getShowuser`,{'id':id}).then(res => {
					if(res.data && res.data.code === 0){
						this.pioneerInfo = res.data.data 
					}else {
						this.$message.error(res.data.msg)
					}
				})
			},
			//获取右侧榜样列表
			getPioneerList(){
				this.$axios.get(`web/showuser/list`).then(res => {
					if(res.data && res.data.code === 0){
						this.pioneerList = res.data.data 
					}else {
						this.$message.error(res.data.msg)
					}
				})
			}
		}	
	}
</script>

<style scoped>
	.study_topic_content{
		width:820px;
	}
/* 新闻快讯 */
ul.public_card_content, ol.public_card_content{
    padding-left: 35px;
}
ul.public_card_content, ul.public_card_content > li{
    list-style: disc;
    color: #d9d9d9;
}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content span{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: 14px;
}
.public_card_content li:hover > span{
	cursor: pointer;
    color: #ff3032;
}
.threeitems .public_card_content li:first-child, .threeitems .public_card_content li:nth-of-type(2),
.threeitems .public_card_content li:nth-of-type(3){
    list-style: none;
    position: relative;
}
.threeitems .public_card_content li:first-child span:before,
.threeitems .public_card_content li:nth-of-type(2) span:before,
.threeitems .public_card_content li:nth-of-type(3) span:before{
    content: counter(chapter);
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 7px;
    left: -22px;
    z-index: 1;
    font-size: 12px;
    line-height: 16px;
    /*background: #6ccddf;*/
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    color: #fff;
    text-align: center;
}
.threeitems .public_card_content li:first-child span:after,
.threeitems .public_card_content li:nth-of-type(2) span:after,
.threeitems .public_card_content li:nth-of-type(3) span:after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 4px 4px 4px 5px;
    /*border-color: transparent transparent transparent #6ccddf;*/
    display: block;
    position: absolute;
    top: 11px;
    left: -8px;
}
.threeitems .public_card_content li:first-child span:before{
    background: #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) span:before{
    background: #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) span:before{
    background: #ffba66;
}
.threeitems .public_card_content li:first-child span:after{
    border-color: transparent transparent transparent #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) span:after{
    border-color: transparent transparent transparent #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) span:after{
    border-color: transparent transparent transparent #ffba66;
}
</style>